<template>
  <div class="teller-skill-match-manage" v-loading="loading"
             element-loading-text="加载中。。。">
    <div>
       <el-card class='cloud-teller-card'>
         <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
              <el-row  :gutter="10">
                          <!-- <el-col :md="6" :lg="4">
                            <el-form-item label='机构编号' class='typeInfo-el-form-item' prop='branchId'>
                               <select-tree ref="tree" v-model="queryForm.branchId" :single-check="true"
                                   :props='{id:"branchId",label: "branchName",children: "childBranch"}' :tree-data="brno"></select-tree>
                               </el-form-item>
                           </el-col> -->

                           <el-col :md="6" :lg="4">
                           <el-form-item label='柜员编号' class='typeInfo-el-form-item' prop='AGENTID'>
                                 <el-input v-model='queryForm.AGENTID'  
                                placeholder="请输入柜员编号"  ></el-input>
                            </el-form-item>
                          </el-col> 

                          <el-col :md="6" :lg="4">
                              <el-form-item label='技能组' prop='BUSITYPE' >
                                    <el-select v-model='queryForm.BUSITYPE' filterable>
                                        <el-option v-for='item in busitypes' :key='item.BUSITYPE' :label='item.BUSITYPENAME' :value='item.BUSITYPE'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                        
                          <!-- <el-col :md="6" :lg="4">
                              <el-form-item label='工作日可用' prop='WORKDAY'>
                                    <el-select v-model='queryForm.WORKDAY'  >
                                        <el-option v-for='item in tellerWorkdayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                          <el-col :md="6" :lg="4">
                              <el-form-item label='节假日可用' prop='HOLIDAY'>
                                    <el-select v-model='queryForm.HOLIDAY'  >
                                        <el-option v-for='item in tellerHolidayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col> -->
                          <el-col :md="3" :lg="2" class="searchBtnMarginTop" >
                                <el-button type='primary' size='mini' icon='el-icon-search' @click="queryModel('search')">查询</el-button>
                          </el-col>
                          <el-col  :md="3" :lg="2" class="searchBtnMarginTop" >
                              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
                          </el-col>
              </el-row>
         </el-form>
      </el-card>
       <el-card class='type-info-bottom'>
          <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Add')">
              <el-button type="primary" size="mini" @click="addDialogShow" icon='el-icon-plus' >新增</el-button>
          </el-col>
           <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Edit')">
              <el-button type="primary" size="mini" @click="updateDialogShow" icon='el-icon-edit' :disabled="!updateButtonShow">修改</el-button>
          </el-col>
          <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Delete')">
              <el-button type="primary" size="mini" @click="deleteConfirm" icon='el-icon-delete' :disabled="!delButtonShow">删除</el-button>
          </el-col> 

          <el-table ref="tableData" :data='tableDataPage' border  min-height="400" width='100%'
            class="tableMarginTop"
            header-row-class-name="tableHeaderClass"
            highlight-current-row
            @selection-change="selectChange"
          >
               <el-table-column type="selection" width="40px"></el-table-column>
               <!-- 这里的prop按照返回的字段去更新 -->
                 <el-table-column prop='AGENTID' label='柜员编号' ></el-table-column>
                 <el-table-column prop='AGENTNAME' label='柜员名称' ></el-table-column>
                 <el-table-column prop='BUSITYPE' label='技能组'></el-table-column>
                 <el-table-column prop='BUSITYPENAME' label='技能组名称'></el-table-column>
                 <!-- <el-table-column prop='WORKDAY' label='工作日可用'>
                     <template slot-scope="scope">
                      <span v-if="scope.row.WORKDAY=='0'">可用</span>
                      <span v-if="scope.row.WORKDAY=='1'">不可用</span>
                    </template>
                  </el-table-column>
                 <el-table-column prop='HOLIDAY' label='节假日可用' >
                     <template slot-scope="scope">
                      <span v-if="scope.row.HOLIDAY=='0'">可用</span>
                      <span v-if="scope.row.HOLIDAY=='1'">不可用</span>
                    </template>
                 </el-table-column> -->
          </el-table>
           <el-pagination style="text-align:right;margin-top:20px;" v-show="this.tableData" 
                :current-page="currentPage" background
                :page-size="pageSize"
                @current-change="changePage"
                layout="total, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
      </el-card>

      <keep-alive>
         <component :is='dialogList.CreateTellerMatchSkill' :option='addDialogOptions' @refreshTable="queryModel('search')"></component>
      </keep-alive>
       <keep-alive>
         <component :is='dialogList.UpdateTellerMatchSkill' :option='updateDialogOptions' @refreshTable="queryModel('search')" :message="this.multipleSelection"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
import CreateTellerMatchSkill from "./dialog/CreateTellerMatchSkill";
import UpdateTellerMatchSkill from "./dialog/UpdateTellerMatchSkill";
import selectTree from "@/components/selectTree2/";
import toolBox from "@/CTManage/utils/toolBox";
import getGlobalParams from '@/common/utils/getGlobalParams';
//通讯相关
import request from "@/common/utils/requestCT";
import TellerMatchSkillQuery from "@/message/CTManage/teller-match-skill/teller-match-skill-query";
import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
import TellerMatchSkillDel  from "@/message/CTManage/teller-match-skill/teller-match-skill-del";
export default {
  name: "cloud-teller-manage",
  components: { selectTree },
  data() {
    return {
      //页面公用
      loading: false,
      //表格
      brno: [],
      tableTotal: 0,
      tableData: [],
      currentPage: 1,
      pageSize: getGlobalParams.get("PageSize"),
      addButtonShow:true,
      delButtonShow:false,
      updateButtonShow:false,
      queryForm: {
        AGENTID:'',
        BUSITYPE:'',
        WORKDAY:'',
        AGENTID:''
      },
       multipleSelection: [],
       busitypes:[],
       telleridSelection:[],

        tellerWorkdayOpions:[
        { label: '可用', value: 0 },
        { label: '不可用', value: 1 }
       ],
        tellerHolidayOpions:[
        { label: '可用', value: 0 },
        { label: '不可用', value: 1 }
        ],
      dialogList: { CreateTellerMatchSkill ,UpdateTellerMatchSkill },
      addDialogOptions: { isShow: false },
      updateDialogOptions: { isShow: false },
    };
  },
  mounted() {
    this.queryModel();
  },
  computed: {
    tableDataPage(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
    }
  },
  methods: {
    selectChange(val) {
      this.multipleSelection = [];
      this.telleridSelection = [];
      if (val.length == 1) {
          this.delButtonShow = true;
          this.updateButtonShow = true;
           this.multipleSelection = val;
        } else if (val.length > 1) {
          this.delButtonShow = false;
          this.updateButtonShow = false;
        } else {
          this.delButtonShow = false;
          this.updateButtonShow = false;
        }
      for(var i = 0;i<val.length;i++){
          this.telleridSelection[i]=val[i]; 
      }
      // console.log("select",this.telleridSelection)
    },
    addDialogShow() {
      this.addDialogOptions.isShow = !this.addDialogOptions.isShow;
    },
    updateDialogShow() {
      this.updateDialogOptions.isShow = !this.updateDialogOptions.isShow;
    },
    async delCloudTeller(){
        this.loading = true;
          let resBody = new TellerMatchSkillDel();
            resBody.data.AGENTID = this.telleridSelection[0].AGENTID;
            resBody.data.BUSITYPE = this.telleridSelection[0].BUSITYPE;
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
               this.loading = false;
            this.$message({
               type: "success",
                  message: "柜员对应用户删除成功!"
          });
          this.queryModel('search');
        }else {
          this.$message({
             type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
      }
        
    },
    deleteConfirm() {
      this.$confirm("此操作将永久删除柜员对应技能，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delCloudTeller();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    changePage(val){
      this.currentPage=val
    },
    clearForm(item) {
      this.$refs["" + item].resetFields();
    },
    async queryModel(data) {
      if(data == 'search'){
        this.currentPage = 1;
      }
      this.loading = true;
      this.tableData=[];
      this.tableTotal=0;
      let resBody = new TellerMatchSkillQuery();
      resBody.data.AGENTID = this.queryForm.AGENTID
      resBody.data.BUSITYPE = this.queryForm.BUSITYPE;
      resBody.data.AGENTID = this.queryForm.AGENTID;
      resBody.data.HOLIDAY = this.queryForm.HOLIDAY;
      resBody.QueryPageNo = this.currentPage;
      resBody.QueryRowNum = this.pageSize;
      let response = await request(resBody);
      this.loading = false;
      if (response.SYS_HEAD.ReturnCode == "000000") {
        this.tableData = response.RSP_BODY.resultSet;
        this.tableTotal = response.RSP_BODY.total * 1
        // ||response.QUERY_INFO_HEAD.QueryAllDataCount;
      }else {
        this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
      }
    },
    // handleSizeChange() {
    //   this.queryModel();
    // },
  },

  async created() {
    // let resBody = new spinnerList();
    // resBody.QueryRowNum = getGlobalParams.get("PageSize");
    // resBody.QueryPageNo = this.currentPage; 
    //   resBody.data.spinnerList = [{
    //     spinnerName: "branch"
    //   }];
    //   let response = await request(resBody);

    //   if (response.SYS_HEAD.ReturnCode == "000000") {
    //     this.brno = response.RSP_BODY.branchSpinner;
    //   } else {
    //     this.$message({
    //       type: "error",
    //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
    //     });
    //   };
      let resBodyTellerSkills = new TellerSkillQuery();
      let responseTellerSkills = await request(resBodyTellerSkills);
      if(responseTellerSkills.SYS_HEAD.ReturnCode == "000000"){
        this.busitypes = responseTellerSkills.RSP_BODY.resultSet;
      }else {
        this.$message({
          type: "error",
          message: "请求失败，错误码:" + responseTellerSkills.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        });
      }
  }
};
</script>


<style lang="scss">
.type-info-bottom {
  margin-top: 10px;
}
.box {
  margin-top: 20px;
  text-align: right;
}
.headerClass {
  background: #f7f7f7 !important;
}
.el-date-editor.el-input {
  width: 100% !important;
}
.el-card {
  overflow: inherit;
}
</style>
